function $$(id){
	return document.getElementById(id);
}

//全局变量
var i=1;
var t;//计时事件使用变量
var canvas=document.getElementById('myCanvas'); 
var ctx = canvas.getContext("2d"); 

//绘制一次太极图
function init(){
	i++;
	
	// 清除画布
	ctx.clearRect(0, 0, 500, 500);
	
	ctx.save();
	
	//重新设置x和y的坐标
	ctx.translate(250,250);
	
	//旋转
	ctx.rotate(Math.PI/6*i);
	
	//绘制图形
	//绘制右边红色大半圆
	drawCircle(ctx,'red',0,0,200,Math.PI*0.5,Math.PI*1.5,true)
	//绘制左边黑色大半圆
	drawCircle(ctx,'black',0,0,200,Math.PI*0.5,Math.PI*1.5,false)
	
	//绘制右边黑色中半圆
	drawCircle(ctx,'black',0,100,100,Math.PI*0.5,Math.PI*1.5,true)
	//绘制左边红色中半圆
	drawCircle(ctx,'red',1,-100,100,Math.PI*0.5,Math.PI*1.5,false)
	
	//绘制黑色小圆
	drawCircle(ctx,'black',0,-100,50,0,Math.PI*2,true);
	//绘制红色小圆
	drawCircle(ctx,'red',0,100,50,0,Math.PI*2,true);	
	
	//restore：用来恢复Canvas之前保存的状态
	ctx.restore(); 
}

//绘制圆形
function drawCircle(ctx,color,x,y,r,sAngle,eAngle,boo){
	ctx.beginPath();
	ctx.fillStyle = color;
	ctx.arc(x,y,r,sAngle,eAngle,boo);
	ctx.closePath();
	ctx.fill();
}

function startTest(){
	//按钮制御
	$$('startBut').disabled=true;//【开始】按钮禁用
	$$('stopBut').disabled=false;//【停止】按钮好用
	
	init();
	t=setTimeout("startTest()",500);
}

function stopTest(){
	//按钮制御
	$$('startBut').disabled=false;
	$$('stopBut').disabled=true;
	
	clearTimeout(t);
}

//事件监听
window.addEventListener("load",init,false);

$$('startBut').addEventListener("click",startTest,false);
$$('stopBut').addEventListener("click",stopTest,false);
